<template>
    <el-drawer
      v-model="visible"
      title="项目详情"
      direction="rtl"
      size="40%"
    >
      <div v-if="project" class="detail-content">
        <!-- 项目基本信息 -->
        <div class="section">
          <h3>项目概览</h3>
          <div class="info-item">
            <label>起止时间：</label>
            <span>{{ project.startDate }} 至 {{ project.endDate }}</span>
          </div>
          <div class="info-item">
            <label>当前进度：</label>
            <el-progress 
              :percentage="project.progress" 
              :status="progressStatus"
            />
          </div>
        </div>
  
        <!-- 巡检记录 -->
        <div class="section">
          <h3>巡检记录</h3>
          <div class="inspection-list">
            <div 
              v-for="task in inspections" 
              :key="task.id"
              class="inspection-item"
            >
              <div class="task-header">
                <span class="task-name">{{ task.name }}</span>
                <el-tag :type="taskStatusType(task.status)">
                  {{ task.status }}
                </el-tag>
              </div>
              <div class="task-meta">
                <span>负责人：{{ task.assignees.join(', ') }}</span>
                <span>截止时间：{{ formatDate(task.dueDate) }}</span>
              </div>
            </div>
          </div>
        </div>
  
        <!-- 问题列表 -->
        <div class="section">
          <h3>待处理问题</h3>
          <div class="issue-list">
            <div 
              v-for="issue in pendingIssues"
              :key="issue.id"
              class="issue-item"
            >
              <div class="issue-header">
                <span class="issue-type">{{ issue.typeLabel }}</span>
                <severity-badge :level="issue.severity" />
              </div>
              <p class="issue-desc">{{ issue.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { useProjectStore } from '@/stores/project'
  
  const props = defineProps({
    modelValue: Boolean,
    projectId: Number
  })
  
  const emit = defineEmits(['update:modelValue'])
  const projectStore = useProjectStore()
  
  const visible = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
  })
  
  const project = computed(() => 
    projectStore.projects.find(p => p.id === props.projectId)
  )
  
  const inspections = computed(() =>
    projectStore.inspections.filter(i => i.projectId === props.projectId)
  )
  
  const pendingIssues = computed(() =>
    projectStore.issues.filter(i => 
      i.projectId === props.projectId && i.status === '待处理'
    )
  )
  
  // 其他计算属性和方法...
  </script>
  
  <style scoped>
  .detail-content {
    padding: 20px;
  }
  
  .section {
    margin-bottom: 30px;
  }
  
  .info-item {
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
  
  .inspection-item, .issue-item {
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ebeef5;
    border-radius: 4px;
  }
  
  .task-header, .issue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  
  .task-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    color: #909399;
  }
  
  .issue-desc {
    color: #666;
    margin: 0;
  }
  </style>